:root {
  // --t-dg-hover: #f0f2f5;
  // --t-dg-fixed-bg: #fff;
  // --t-dg-th-bg: #fafafa;
  // --t-dg-th-border-color: #d9d9d9;
  // --t-fixed-header-offset-top:0px;

  --t-prefab-pagination-color: rgba(0,0,0,.8);
  // --t-prefab-pagination-font-color:#86909C;
  --t-prefab-pagination-font-color: rgba(0,0,0,.56);
  --t-prefab-pagination-bgColor: #F2F3F8;
}


$flex-column-gap: 4px;
$height: 32px;

@mixin __font-style{
  font-size: 12px;
  // font-weight: 400;
  // line-height: 20px;
  color: var(--t-prefab-pagination-font-color);
}

@mixin __height{
  min-height: $height;
  height: $height;
}

@mixin __overwrite-q-pagination{
  .q-pagination{
    @include __height;

    .text-primary{
      color: var(--t-prefab-pagination-color) !important;
    }

    button.q-btn{
      min-width: 32px !important;
      width: 32px !important;
      height: 32px !important;
      margin: 0;

      &.bg-primary{
        background-color: var(--t-color-background) !important;

        .q-btn__content{
          color: var(--t-color)
        }
      }
    }
  }
}

@mixin __perfective{
  display: inline-flex;
  align-items: center;
  column-gap: $flex-column-gap;

  &-total{
    margin-right: 12px;
    @include __font-style;
    color: var(--t-prefab-pagination-color);
  }
  &-pagination{
    margin-top: 1px;

    .q-pagination{
      .q-pagination__content{
        column-gap: $flex-column-gap;

        .q-pagination__middle{
          column-gap: $flex-column-gap;
        }
      }

      button.q-btn{
        @include __font-style;
        .block{
          // @include __font-style;
        }
      }
    }

  }

  &-page-size{
    background-color: var(--t-prefab-pagination-bgColor);
    padding-left: 8px;
    padding-right: 8px;

    .q-select__dropdown-icon{
      font-size: 10px;
    }

    .q-field__control{
      @include __height;

      > div{
        @include __height;

        .q-field__native{
          @include __height;
        }
      }
    }
    .page-size-val{
      margin-right:5px;
      @include __font-style;
    }

    .page-size-val-suffix{
      @include __font-style;
    }
  }

  &-jump{
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    column-gap: 8px;

    .jump-title{
      @include __font-style;
      flex-shrink: 0;
    }

    .jump-input{
      flex-basis: 48px;
      .q-field__control{
        background-color: var(--t-prefab-pagination-bgColor) !important;
        border-color: transparent;

        input{
          width: 100%;
        }
        input[type="number"] {
          -moz-appearance: textfield; /* Firefox */
          appearance: textfield;
          text-align: center;
          @include __font-style;
        }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
          -webkit-appearance: none; /* Safari */
          margin: 0;
        }
      }
    }
  }
}

.t-prefab-pagination{
  @include __overwrite-q-pagination;
  display: inline-block;
  color: var(--t-prefab-pagination-color);

  .t-prefab-pagination__perfective{
    @include __perfective;

    &.mobile{
      display: unset;
    }
  }
}
